<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/template/TCubeTTATemplate.xhtml">

    <ui:define name="contentInsert">
        <h5>Enter country and age group to find out which outlets are popular among customers. Popularity is the number of transactions done by each customer group.</h5>
        <h:form id="param">  
            <h:panelGrid columns="4">
                <h:selectOneMenu id="selectCountry" value="#{tCubePopularityMB.selectedCountry}">
                    <f:selectItem itemLabel="All countries" itemValue="all"/>
                    <f:selectItems value="#{tCubePopularityMB.countriesItems}"/>
                </h:selectOneMenu>
                <h:selectOneMenu id="selectAge" value="#{tCubePopularityMB.selectedAgeGroup}">
                    <f:selectItem itemLabel="All age groups" itemValue="all"/>
                    <f:selectItems value="#{tCubePopularityMB.ageGroupsItems}"/> 
                </h:selectOneMenu> 
                <p:commandButton value="Get Popularity List" update="popularityTable"/>
                <p:ajaxStatus style="width:16px;height:16px;">
                    <f:facet name="start">
                        <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                    </f:facet>
                    <f:facet name="complete">
                        <h:outputText value="" />
                    </f:facet>
                </p:ajaxStatus>
            </h:panelGrid>

            <p:dataTable id="popularityTable" value="#{tCubePopularityMB.popularity}"
                         var="anOutlet" emptyMessage="No outlet exists...">

                <f:facet name="header">
                    Outlet popularity
                </f:facet>
                <p:column headerText="Rank">
                    #{anOutlet.serialNumber}
                </p:column>
                <p:column headerText="Stakeholder">
                    #{anOutlet.stakeholderName}
                </p:column>
                <p:column headerText="Outlet Name">
                    #{anOutlet.outletName}
                </p:column>
                <p:column headerText="Popularity">
                    #{anOutlet.popularity}
                </p:column>
            </p:dataTable>
        </h:form>
    </ui:define>
</ui:composition>